<template>
  <vxe-modal :loading="loading" min :close-on-click-modal="false"
             :key="dialogKey" v-model="ziVisible" title="查看文档内容" width="70%" esc-closable showFooter show-zoom resize>
    <div style="height: 77vh; overflow-y: auto;">
      <el-card class="box-card" shadow="never" :body-style="{ padding: '10px',backgroundColor: '#bfcdda' }">
        <div slot="header" class="clearfix" style="text-align: center">
          <span style="font-size: 16px; color: #1890ff;">{{wdName}}</span>
        </div>
        <el-card class="box-card" shadow="hover" style="min-height: 25vh">

        <div class="ql-container ql-snow" style="border: 1px solid #ffffff;">
          <div class="ql-editor" style="font-size: 16px">
            <div v-html="wd"></div>
          </div>
        </div>

        </el-card>
      </el-card>
    </div>
  </vxe-modal>
</template>

<script>
import {getKfwd} from "@/api/kfwd/kfwd";

export default {
  name: "KfWdXq", //开发文档详情
  data() {
    return {
      dialogKey: 0,
      loading: false,
      ziVisible: false,
      rowData: null,
      wdData: null,
      wdName: null,
      wd: null,
    }
  },
  methods: {
    handleOpen(row) {
      this.loading = true
      this.dialogKey++
      this.ziVisible = true;
      this.rowData = row;
      this.getKfWdXqData();
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    getKfWdXqData() {
      const kfwdId = this.rowData.kfwdId;
      getKfwd(kfwdId).then(res => {
        this.wdData = res.data
        this.wdName = this.wdData.wdName
        this.wd = this.wdData.wd
      })

    }
  }
}
</script>

<style scoped>

</style>
